<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小组</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script th:src="@{/js/jquery.form.js}"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#createTeamForm").ajaxForm(function (data) {
                if (data.success) {
                    $("#resultMsg").html("创建小组成功！");
                } else {
                    $("#resultMsg").html(data.errMsg);
                }
                $('#resultModal').modal('show');
                $('#createTeamName').val("");
            });
            $("#joinTeamForm").ajaxForm(function (data) {
                if (data.success) {
                    $("#resultMsg").html("加入小组成功！");
                } else {
                    $("#resultMsg").html(data.errMsg);
                }
                $('#resultModal').modal('show');
                $('#inviteCode').val("");
            });

            $("#myTeamTab").click(function () {
                //更新局部信息
                $("#myTeamDiv").load("/api/teams/updateView/joined");

            });

            $("#createdTeamTab").click(function () {
                //更新局部信息
                $("#createdTeamDiv").load("/api/teams/updateView/created");
            });
        });
    </script>
    <style>
        body {
            background: url("/img/banner_team.jpg");
            background-position: center;
        }

        .mt-60 {
            margin-top: 60px;
        }

        .mt-120 {
            margin-top: 120px;
        }

        .mb-60 {
            margin-bottom: 60px;
        }

        .mb-120 {
            margin-bottom: 120px;
        }

        .content {
            z-index: 1;
        }

        .content:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: -1;
            background-image: url("/img/banner_team.jpg");
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
            -webkit-filter: blur(20px);
            -moz-filter: blur(20px);
            -ms-filter: blur(20px);
            -o-filter: blur(20px);
            filter: blur(20px);
        }

        .content-deep {
            z-index: 1;
        }

        .content-deep:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: -1;
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
        }

        .h-center {
            margin: 0 auto;
        }

        #myTabDiv {
            z-index: 2;
            position: fixed;
            width: 100%;
            height: 42px;
        }

        #myTabContentDiv {
            z-index: 1;
            position: absolute;
            top: 42px;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="myTabDiv">
    <ul class="nav nav-tabs content-deep" id="myTab" role="tablist" style="position: relative;width: 100%">
        <li class="nav-item">
            <a class="nav-link active" id="createTeamTab" data-toggle="tab" href="#createTeamPanel" role="tab"
               aria-controls="createTeam" aria-selected="true">创建小组</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="joinTeamTab" data-toggle="tab" href="#joinTeamPanel" role="tab"
               aria-controls="joinTeam" aria-selected="false">加入小组</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="myTeamTab" data-toggle="tab" href="#myTeamPanel" role="tab" aria-controls="myTeam"
               aria-selected="false">已加入</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="createdTeamTab" data-toggle="tab" href="#createdTeamPanel" role="tab"
               aria-controls="createdTeam" aria-selected="false">已创建小组</a>
        </li>
    </ul>
</div>

<div class="tab-content" id="myTabContentDiv">
    <div class="tab-pane fade show active mt-120" id="createTeamPanel" role="tabpanel" aria-labelledby="createTeamTab">
        <div class="card content col-5 h-center" id="createTeamDiv">
            <div class="card-body">
                <h2 class="card-title mb-4">创建小组</h2>
                <form th:action="@{/api/teams/add}" method="post" th:object="${createTeamForm}" id="createTeamForm">
                    <input name="userId" th:value="${userId}" hidden>
                    <div class="form-group">
                        <label for="createTeamName">小组名称</label>
                        <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="请输入小组名称"
                               id="createTeamName" name="teamName">
                        <small class="form-text" id="createTeamLabel"></small>
                    </div>
                    <div class="row col-md-12">
                        <input type="submit" class="btn btn-primary col-md-3" style="margin-top: 20px;"
                               id="createTeamBtn" value="创建">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="tab-pane fade mt-120" id="joinTeamPanel" role="tabpanel" aria-labelledby="joinTeamTab">
        <div class="card content col-5 h-center" id="joinTeamDiv">
            <div class="card-body">
                <h2 class="card-title mb-4">加入小组</h2>
                <form th:action="@{/api/teams/join}" method="post" th:object="${joinTeamForm}" id="joinTeamForm">
                    <input name="userId" th:value="${userId}" hidden>
                    <div class="form-group">
                        <label for="createTeamName">小组名称</label>
                        <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="请输入邀请码"
                               id="inviteCode" name="inviteCode">
                        <small class="form-text" id="joinTeamLabel"></small>
                    </div>
                    <div class="row col-md-12">
                        <input type="submit" class="btn btn-primary col-md-3" style="margin-top: 20px;" id="joinTeamBtn"
                               value="加入"/>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="tab-pane fade mt-120 mb-120" id="myTeamPanel" role="tabpanel" aria-labelledby="myTeamTab">
        <div class="card content ml-5 mr-5 h-center" id="myTeamDiv">
            <div class="card-body" th:fragment="joinedTeamsFragment">
                <h2 class="card-title mb-4">我的小组</h2>
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">小组名字</th>
                        <th scope="col">小组人数</th>
                        <th scope="col">邀请码</th>
                        <th scope="col">加入日期</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="team:${joinedTeams}">
                        <th scope="row" th:text="${teamStat.index+1}"></th>
                        <th th:text="${team.name}"></th>
                        <th th:text="${team.memberNum}"></th>
                        <th th:text="${team.inviteCode}"></th>
                        <th th:text="${#dates.format(team.joinTime, 'yyyy-MM-dd HH:mm:ss')}"></th>
                        <th>查看</th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="tab-pane fade mt-120 mb-120" id="createdTeamPanel" role="tabpanel" aria-labelledby="createdTeamTab">
        <div class="card content ml-5 mr-5 h-center" id="createdTeamDiv" >
            <div class="card-body" th:fragment="createdTeamsFragment">
                <h2 class="card-title  mb-4">已创建小组</h2>
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">小组名字</th>
                        <th scope="col">小组人数</th>
                        <th scope="col">邀请码</th>
                        <th scope="col">创建日期</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="team:${createdTeams}">
                        <th scope="row" th:text="${teamStat.index+1}"></th>
                        <th th:text="${team.name}"></th>
                        <th th:text="${team.memberNum}"></th>
                        <th th:text="${team.inviteCode}"></th>
                        <th th:text="${#dates.format(team.createTime, 'yyyy-MM-dd HH:mm:ss')}"></th>
                        <th>查看</th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div th:replace="alert :: alertFragment"></div>
</body>
</html>